<template>
  <div>
    <div class="information">
      <router-link to="/person">
        <div class="infor">
          <img
            :src="$store.state.userimg"
            alt=""
          />
          <dl>
            <dt>{{ $store.state.username }}</dt>
            <dd>id:{{ $store.state.uid }}</dd>
          </dl>
        </div>
      </router-link>
      <div class="assets">
        <div class="assets2" v-for="(item, i) in list" :key="i">
          <router-link :to="item.path">
             <p>{{ item.many }}</p>
          <h5>{{ item.money }}</h5>
          </router-link>
         
          
        </div>
      </div>
    </div>

    <div class="order">
      <div class="order2">
        <p>订单中心</p>
        <h5 @click="order()">查看更多 ></h5>
      </div>
      <div class="order3">
        <router-link to="/orCenter">
          <dl>
            <dt><i class="el-icon-wallet"></i></dt>
            <dd>待付款</dd>
          </dl>
        </router-link>
        <router-link to="/orCenter">
          <dl>
            <dt><i class="el-icon-truck"></i></dt>
            <dd>待发货</dd>
          </dl>
        </router-link>
        <router-link to="/orCenter">
          <dl>
            <dt><i class="el-icon-box"></i></dt>
            <dd>待收货</dd>
          </dl>
        </router-link>
        <router-link to="/orCenter">
          <dl>
            <dt><i class="el-icon-edit-outline"></i></dt>
            <dd>待评价</dd>
          </dl>
        </router-link>
        <router-link to="/orCenter">
          <dl>
            <dt><i class="el-icon-document-delete"></i></dt>
            <dd>已取消</dd>
          </dl>
        </router-link>
      </div>
    </div>

    <div class="bargain">
      <img
        src="../../assets/kan_01.png"
        alt=""
      />
    </div>

    <div class="serve">
      <router-link to="/address">
        <dl>
          <dt><i class="el-icon-location"></i></dt>
          <dd>收货地址</dd>
        </dl>
      </router-link>
      <router-link to="/customer">
        <dl>
          <dt><i class="el-icon-service"></i></dt>
          <dd>客服咨询</dd>
        </dl>
      </router-link>
      <router-link to="/news">
        <dl>
          <dt><i class="el-icon-chat-round"></i></dt>
          <dd>消息中心</dd>
        </dl>
      </router-link>
      <router-link to="/opinion">
        <dl>
          <dt><i class="el-icon-receiving"></i></dt>
          <dd>意见反馈</dd>
        </dl>
      </router-link>
      <router-link to="/collage">
        <dl>
          <dt><i class="el-icon-s-custom"></i></dt>
          <dd>我的拼团</dd>
        </dl>
      </router-link>
      <router-link to="/setup">
        <dl>
          <dt><i class="el-icon-s-tools"></i></dt>
          <dd>设置</dd>
        </dl>
      </router-link>
    </div>
    <div class="footer">—————我是有底线的—————</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        nickname: "木子酱",
        id: 45657,
      },
      // many:["￥0.0","￥8.0","3张","100分"],
      // money:["余额","红包","",""],
      list: [
        {
          many: "￥0.0",
          money: "余额",
          path:"/balance"
        },
        {
          many: "￥8.0",
          money: "红包",
           path:"/redBag"
        },
        {
          many: "3张",
          money: "优惠券",
           path:"/coupon"
        },
        {
          many: "100分",
          money: "积分",
           path:"/integral"
        },
      ],
    };
  },
  methods: {
    order() {
      this.$router.push("/orCenter");
			console.log(this.$store.state.imgsrc,"baozi");
    },
  },
};
</script>

<style scoped>
.information {
  width: 100vw;
  height: 18vh;
  background: #409EFF;
  /* margin-top: 8vh; */
  position: relative;
}
.information img {
  width: 60px;
  height: 60px;
  border-radius: 50px;
  margin-left: 5vw;
  margin-top: 2vh;

}
.infor {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  position: relative;
}
.infor dl {
  margin-top: 4vh;
  margin-left: 3vw;
}
.infor dt {
  margin-bottom: 1vh;
}
.assets {
  display: flex;
  width: 90vw;
  height: 14vh;
  background: #fff;
  position: absolute;

  top: 12vh;

  left: 0vw;
  border-radius: 20px;
  width: 100vw;
  text-align: center;
  justify-content: space-evenly;
}
.assets p {
  color: red;
  font-size: 16px;
}
.assets h5 {
  color: #000;
  font-size: 12px;
  margin-top: 1vh;
}
.assets2 {
  margin-left: 10px;
  margin-top: 25px;
}
.order {
  width: 100vw;
  height: 18vh;
  /* background: cyan; */
  margin-top: 38px;
}
.order2 {
  width: 100vw;
  height: 8vh;
  background: #fff;
  margin-top: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cccccc;
}
.order2 p {
  font-size: 16px;
  color: #333333;
  margin-left: 15px;
}
.order2 h5 {
  margin-left: 60vw;
  color: #409EFF;
  font-size: 14px;
}
.order3 {
  width: 100vw;
  height: 10vh;
  background: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.order3 dt {
  font-size: 26px;
  color: #409EFF;
}
.order3 dd {
  font-size: 14px;
  color: #333333;
}
.bargain {
  width: 100vw;
  height: 22vh;
  /* background: hotpink; */
  margin-top: 15px;
  text-align: center;
}
.bargain img {
  width: 95vw;
  height: 22vh;
  border-radius: 20px;
}
.serve {
  width: 100vw;
  height: 24vh;
  /* background: cornflowerblue; */
  margin-top: 10px;
  display: flex;
  align-content: space-around;
  justify-content: space-around;
  flex-wrap: wrap;
  text-align: center;
}

.serve dt {
  width: 30vw;
  /* background: darkcyan; */
  margin-top: 5px;
  font-size: 28px;
  color: #409EFF;
}
.serve dd {
  font-size: 14px;
  color: #333333;
}
.footer {
  width: 100vw;
  height: 5vh;
  /* background: crimson; */
  text-align: center;
  line-height: 5vh;
  color: #999999;
  font-size: 14px;
}
</style>
